/*
  Keystone & Beam Website Styles
  -------------------------------------
  A minimalist, responsive and accessible stylesheet using BEM naming. All
  colours and dimensions are defined as CSS variables for easy theming. The
  design emphasizes structure and precision through the use of grids, borders
  and clean typography.
*/

/* ===== CSS Variables ===== */
:root {
  --color-dark: #1c1f21;
  --color-gray: #2a2e31;
  --color-steel: #a6b1b7;
  --color-wood: #c8a97e;              /* hex for general use */
  --color-wood-rgb: 200,169,126;      /* rgb tuple for rgba() uses */
  --color-light: #f5f5f5;
  --color-primary: var(--color-wood);
  --color-primary90: rgba(var(--color-wood-rgb), 0.9); /* 90% opacity */
  --color-secondary: var(--color-steel);
  --color-unique: rgba(45, 25, 10, 1);

  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --max-width: 1200px;
  --container-padding: 1rem;
  --header-height: 72px;
  --border-radius: 8px;
  --transition: 0.3s ease;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  
  --nav-gap: 2rem;


  /* hero layout variable removed; bubble removed */

  /*
    Additional spacing scale and accent variables
    These provide a consistent rhythm throughout the layout and a
    dedicated alias for accent colours used in interactive states.
  */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --kb-color-accent: var(--color-primary);
}

/* ===== Global Styles ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-dark);
  background-color: var(--color-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
a:hover,
a:focus { color: var(--color-primary); }

button { cursor: pointer; font-family: inherit; }

/* Focus styles for accessibility */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== Utility Classes ===== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow { max-width: 960px; }

.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}

.section-intro {
  font-size: 1rem;
  color: var(--color-gray);
  max-width: 600px;
  margin-bottom: 2rem;
}

/* simple helper for centering text where applied in HTML */
.center { text-align: center; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  transition: all var(--transition);
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-primary90);
  color: var(--color-light);
}
.btn--primary:hover,
.btn--primary:focus {
  background-color: rgba(45, 25, 10, 0.65);
  color: var(--color-light);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn--secondary:hover,
.btn--secondary:focus { background-color: rgba(255, 255, 255, 0.2); }

/* Hero-specific styling: apply a light tinted background to the
   secondary call‑to‑action in the hero section to ensure legibility
   over the busy hero backdrop.  We leave other secondary buttons
   unchanged elsewhere on the site. */
.hero .btn--secondary {
  background-color: var(--color-primary90);
  color: var(--color-light);
  border-color: transparent;
}
.hero .btn--secondary:hover,
.hero .btn--secondary:focus {
  /* Use the same darker tone as the primary button’s hover state */
  background-color: rgba(45, 25, 10, 0.65);
  color: var(--color-light);
}

/* Demo back button – provided CSS values must not change */
.demo-back {
  position: fixed;
  top: 20px; left: 20px;
  z-index: 2147483647;
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(17,17,17,0.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  text-decoration: none;
}
.demo-back:hover { background: rgba(17,17,17,0.85); transform: scale(1.05); }
.demo-back img { width: 48px; height: 48px; display: block; }
@media (max-width: 640px) {
  .demo-back { width: 56px; height: 56px; top: 64px; left: 12px; }
  .demo-back img { width: 32px; height: 32px; }
}

/* ===== Header & Navigation ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: rgba(28, 31, 33, 0.8);
  backdrop-filter: blur(6px);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color var(--transition), border-color var(--transition);
}
.header--scrolled {
  background-color: rgba(28, 31, 33, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Header: center logo + links as one group */
.header__container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;  /* center the whole row (logo + links) */
  gap: var(--nav-gap);       /* space between logo and first link */
}



.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-light);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.header__logo-image { width: 32px; height: 32px; }

.header__nav { position: relative; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-light);
}
.nav__toggle-bar {
  width: 100%;
  height: 2px;
  background-color: var(--color-light);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__menu {
  list-style: none;
  display: flex;
  gap: var(--nav-gap);       /* same rhythm as logo-to-first link */
  align-items: center;
  margin: 0;                 /* avoid browser default margins */
}

.nav__link {
  color: var(--color-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  position: relative;
  padding: 0.25rem 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__link:hover::after,
.nav__link:focus::after,
.nav__link.active::after { transform: scaleX(1); }

/* Mobile nav */
@media (max-width: 768px) {
  .nav__toggle { 
    display: flex; 
  }

  .nav__menu {
    position: fixed;
    top: var(--header-height);
    right: 0;
    height: calc(100vh - var(--header-height));
    width: 80%;
    max-width: 300px;
    background-color: var(--color-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    gap: var(--nav-gap); /* ✅ keep spacing consistent */
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
  }

  .nav__menu--open { 
    transform: translateX(0); 
  }

  .nav__link { 
    font-size: 1rem; 
    color: var(--color-light); 
  }
}


/* ===== Brand Name (Word-mark) ===== */
.header__brand-name {
  /* shared typography + layout only (no color here) */
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1, "kern" 1;
  position: relative;
  white-space: nowrap;
  padding-bottom: 0.15em; /* room for underline flourish */
}

/* Light marble variant — for header */
.header__brand-name--light {
  background-image: linear-gradient(
    180deg,
    #f9f9f9 0%,   /* near-white highlight */
    #eeeeee 30%,  /* soft light gray vein */
    #e2e2e2 60%,  /* subtle depth */
    #f4f4f4 100%  /* polished white base */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Dark obsidian variant — for hero bubble */
/* Dark obsidian variant */
.header__brand-name--dark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;

  /* OBSIDIAN carved metallic shine */
  background-image: linear-gradient(
    180deg,
    #0d0d0d 0%,     /* near-black top edge */
    #1a1a1a 20%,    /* deep charcoal mid-high */
    #2c2f33 40%,    /* subtle cool gray sheen */
    #101214 60%,    /* dark glossy recess */
    #262626 80%,    /* reflected highlight */
    #0a0a0a 100%    /* obsidian black base */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.35);

  /* layered shadows for depth + carved look */
  text-shadow:
    1px 1px 2px rgba(255, 255, 255, 0.1),  /* faint edge highlight */
    -1px -1px 2px rgba(0, 0, 0, 0.6),      /* inner carved shadow */
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.25);

  font-kerning: normal;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1, "kern" 1;
  position: relative;
  white-space: nowrap; /* keeps Keystone & Beam on one line */
  padding-bottom: 0.15em; /* room for underline flourish */
}

/* underline flourish (applies to both variants) */
.header__brand-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-wood-rgb), 0.35) 8%,
    rgba(var(--color-wood-rgb), 0.9) 50%,
    rgba(var(--color-wood-rgb), 0.35) 92%,
    transparent 100%
  );
  transform: translateZ(0);
}

/* Header size & contrast (targets the light variant in the header) */
.header .header__brand-name--light {
  font-size: 1.25rem;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.35);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.20),
    0 2px 6px rgba(0,0,0,0.30);
}

/* Hero bubble word-mark (targets the dark variant in the hero) */
.hero__bubble .header__brand-name--dark {
  display: block;
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.05;
  margin-bottom: 0.35em;
  -webkit-text-stroke: 1px rgba(24,26,29,0.35);
  text-shadow:
    0 2px 0 rgba(255,255,255,0.25),
    0 4px 14px rgba(0,0,0,0.25);
}
.hero__bubble .header__brand-name--dark::after {
  height: 3px;
  bottom: -0.1em;
}

.hero__bubble .header__brand-name--dark {
  margin-top: 0.11em;
  margin-bottom: 0em;
}

/* ===== Hero Section ===== */
.hero {
  position: relative;
  /*
    Make the hero flexible: rather than locking it to exactly 100vh,
    use a minimum height equal to the viewport minus the fixed header.
    This allows the section to expand if its contents exceed the viewport
    (preventing cropping) while still filling the screen on smaller
    devices. Add top padding equal to the header height so the first
    line of text doesn’t hide beneath the fixed header.
  */
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center; /* center the content */
  color: var(--color-light);
  text-align: center;
  /* Serve the hero background in multiple formats for optimal performance */
  background-image: image-set(
    url('../images/hero.avif') type('image/avif'),
    url('../images/hero.webp') type('image/webp'),
    url('../images/hero.png') type('image/png')
  );
  background-size: cover;
  background-position: center;
  /* Allow content to overflow on mobile: when the hero content is taller than
     the viewport (minus the header), we don't want it to be clipped off.
     Previously this section used `overflow: hidden;`, which caused the
     heading and buttons to be cut off on small screens. Making the overflow
     visible ensures the full hero content is displayed and the page can
     scroll naturally on devices with limited height. */
  overflow: visible;
  padding-inline: clamp(16px, 4vw, 64px);
}

/* Soft overlay for readability (slightly stronger at bottom) */
.hero__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Warm, subtle overlay: bronze and steel tint instead of harsh black */
  /*
    Warm golden overlay: start with a semi‑opaque wood tone and fade
    into a deeper slate hue. This tint improves legibility on busy
    backgrounds without using a solid bubble.
  */
  background: linear-gradient(
    180deg,
    rgba(var(--color-wood-rgb), 0.88) 0%,   /* top: 88% opacity */
    rgba(24, 24, 24, 0.98) 100%            /* bottom: 98% opacity */
  );
  z-index: 1;
}

/* Centered stack (semantic wrapper) — children are absolutely positioned to .hero */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  /* Center and stack children vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Enlarge the hero brand name on desktop.  Since the dark variant of the
   brand name is only used within the hero, we set its font size here
   to roughly 2.5× the default body size.  This provides a dramatic
   headline above the main title.  Mobile devices hide this element
   entirely via a media query below. */
.hero__content .header__brand-name--dark {
  font-size: 2.5rem;
  line-height: 1.2;
}

/* === HERO ACTIONS (buttons) === */
/*
  Position hero action buttons relative to the hero content on all viewports.
  Previously the buttons were absolutely positioned at a fixed percentage,
  which caused cropping and mis‑alignment on smaller screens. By making the
  container static and letting it flow naturally below the heading text,
  the buttons remain centered and wrap when necessary.
*/
.hero__actions {
  position: static;
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 3;
}
.hero__actions .btn {
  margin: 0.5rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #2b2f33; /* slate/charcoal */
}

/* default = desktop, keep them inline */
.hero__title span {
  display: inline;
  white-space: nowrap; /* keeps each phrase from splitting mid-word */
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-unique);
  margin: 0 0 0.75rem 0;
}
.hero__text {
  font-size: 1rem;
  margin: 0;
  color: var(--color-light);
}

/* Blueprint lines overlay */
.hero__blueprint {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
  z-index: 1;
}
.hero__blueprint line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw-line 6s linear forwards infinite;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* Small screens: adjust hero actions spacing on mobile */
@media (max-width: 640px){
  .hero__actions {
    margin-top: 1.5rem;
  }

  /* Scale down hero typography on small screens to prevent text
     overflow and cropping. Without these adjustments, the large
     display fonts wrap too aggressively on mobile devices.
     We also hide the hero brand line on mobile to avoid redundancy
     with the header logo. */
  .hero__title {
    
    font-size: 1.35rem;
  }
  
  /* mobile = force line breaks at each span */
@media (max-width: 768px) {
  .hero__title span {
    display: block;      /* each span starts on its own line */
  }
}

.hero__subtitle {
  display: flex;          /* keep items in one line if space allows */
  flex-wrap: wrap;        /* allow wrapping on small screens */
  margin-top: 1em;   /* roughly one line-height */
  gap: 0.5rem;            /* spacing between bullets */
  justify-content: center; /* keep centered */
  text-align: center;
  font-size: 1rem;
}

.hero__subtitle span {
  white-space: nowrap;    /* ensures each bullet point stays together */
}

  .hero__text {
    font-size: 0.9rem;
  }
  /* Hide the hero brand name on mobile (redundant below the header logo). */
  .hero__content .header__brand-name--dark {
    display: none;
  }
}

/* ===== Services Section ===== */
.services {
  padding: 6rem 0;
  background-color: var(--color-light); /* light panel by intent */
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.services__item {
  background-color: #ffffff;
  border: 1px solid var(--color-steel);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.services__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.services__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--color-primary);
}

.services__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}
.services__desc {
  font-size: 0.875rem;
  color: var(--color-gray);
  margin-bottom: 1rem;
}

.services__link {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
}
.services__link:hover { text-decoration: none; }

/* Center the Services heading + intro when desired */
/* Center any section heading + intro when desired */
.section-heading.center,
.section-intro.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ===== Projects Section ===== */
.projects {
  padding: 6rem 0;
  background-color: var(--color-light);
  text-align: center;
}

/* Ensure the intro paragraph is centered and constrained */
.projects .section-intro {
  margin-left: auto;
  margin-right: auto;
}

/* 2×2 centered grid with equal square thumbs */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}

/*
  On smaller screens, switch the projects grid to a single column. Without
  this media query, the two‑column grid maintains a minimum column width
  of 260 px, which forces the layout to overflow horizontally on phones.
*/
@media (max-width: 768px) {
  .projects__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: none;
  }
  .project {
    max-width: none;
  }
}

.project {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  cursor: pointer;
  border: 1px solid var(--color-steel);
  transition: transform var(--transition), box-shadow var(--transition);
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;          /* perfect square card */
}
.project:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.project__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* center crop */
  object-position: center;
}

.project__caption {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(28,31,33,0.85), rgba(28,31,33,0.0) 60%);
  color: var(--color-light);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(100%);
  transition: transform var(--transition);
  font-size: 0.875rem;
}
.project:hover .project__caption { transform: translateY(0); }

.project__title { font-weight: 600; font-family: var(--font-body); }
.project__desc  { font-weight: 400; }

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
.lightbox--active { display: flex; }

.lightbox__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.lightbox__dialog {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1;
}

.lightbox__img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.lightbox__caption {
  color: var(--color-light);
  text-align: center;
  max-width: 600px;
  font-size: 0.9rem;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-light);
  font-size: 2rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: color var(--transition);
}

/* set the lightbox navigation arrows lower on mobile */
@media (max-width: 768px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 25%;
    transform: none;
  }
}

.lightbox__close {
  top: 1rem; right: 1rem;
  transform: none;
  font-size: 2.5rem;
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; } /* FIXED: added missing dot */

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { color: var(--color-primary); }

/* ===== About Section ===== */
.about {
  padding: 6rem 0;
  background-color: var(--color-light);
}

/* Layout: content defines the section height; image conforms */
.about__container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: stretch;        /* stretch children to equal height */
}

@media (min-width: 768px) {
  .about__container {
    flex-direction: row;
    align-items: stretch;      /* equal height columns on desktop */
  }
}


/* Left column (image) */
.about__image-wrapper {
  /* lock a reasonable column width and make it fill the container's height */
  flex: 0 0 clamp(260px, 30vw, 360px);
  width: clamp(260px, 30vw, 360px);
  align-self: stretch;         /* fill container height */
  margin: 0;                   /* don't center inside the row */
  text-align: center;
}

/* Right column (text + badges) */
.about__content {
  flex: 1 1 auto;
}

.about__content p {
  margin-bottom: 1rem;
  color: var(--color-gray);
}

/* Badges in a centered vertical stack */
.about__badges {
  display: flex;
  flex-direction: column;      /* stack vertically */
  align-items: center;         /* center the stack */
  gap: 2rem;
  margin-top: 1rem;
}

.about__badges .badge {
  display: flex;
  flex-direction: column;      /* icon above caption */
  align-items: center;
  text-align: center;
}

.about__badges svg {
  width: 88px;                 /* consistent icon size */
  height: 88px;
}

/* Defensive: ensure the photo inside the wrapper is cropped square even if the IMG lacks the .about__image class */
.about__image,
.about__image-wrapper img {
  width: 100%;
  height: 100%;                /* fill the equal-height column */
  object-fit: cover;           /* crop neatly */
  display: block;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-steel);
}

/* Mobile-only: center the About image wrapper */
@media (max-width: 768px) {
  .about__image-wrapper {
    margin-left: auto;
    margin-right: auto; /* or margin-inline: auto; */
  }
}




/* ===== Testimonials Section ===== */
.testimonials {
  padding: 6rem 0;
  background-color: var(--color-light);
  text-align: center;
}

/* Only show one testimonial at a time by default */
.testimonials__carousel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  overflow: hidden;
}

/* Hide all by default */
.testimonial {
  display: none;
  background-color: #ffffff;
  border: 1px solid var(--color-steel);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
  max-width: 720px;
}

/* Show only the active one */
.testimonial.active {
  display: block;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--color-dark);
}

.testimonial__author {
  font-weight: 600;
  color: var(--color-gray);
  margin-bottom: 0.5rem;
}

.testimonial__stars {
  color: var(--color-primary);
  font-size: 1.2rem;
}

.testimonials__controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.testimonials__controls button {
  background: none;
  border: 1px solid var(--color-dark);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.testimonials__controls button:hover {
  background-color: var(--color-dark);
  color: var(--color-light);
}

/* ===== Contact Section ===== */
.contact {
  padding: 6rem 0;
  background-color: var(--color-light);
}

.contact__container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.contact__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact__form {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form__group label {
  font-weight: 600;
  color: var(--color-dark);
}

.form__group input,
.form__group textarea {
  padding: 0.75rem;
  border: 1px solid var(--color-steel);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 1rem;
}

/* Lock the “Message” textarea size */
.form__group textarea {
  resize: none;        /* or: resize: vertical; */
  height: 8rem;        /* fixed height */
  min-height: 8rem;
  max-height: 8rem;
  overflow: auto;      /* scroll if content exceeds height */
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.form__error {
  font-size: 0.875rem;
  color: red;
}

/* UPDATED: center the button */
.form__submit {
  align-self: center;   /* center relative to form width */
  text-align: center;   /* fallback centering */
}

/* UPDATED: center the note */
.form__note {
  font-size: 0.875rem;
  color: var(--color-gray);
  text-align: center;   /* center the text */
}

.contact__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact__info {
  text-align: center;
}

/* Mobile/tablet default: image sizes naturally by width */
.contact__map img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-steel);
  display: block;
}


/* ===== Footer ===== */
.footer {
  background-color: var(--color-dark);
  color: var(--color-light);
  padding: 2rem 0;
  margin-top: 4rem;
}

/*
  =========================================================================
  Additional enhancements for Keystone & Beam
  These rules are appended to preserve existing behaviour while polishing
  the experience. They adjust typography, provide clear focus outlines,
  honour reduced‑motion preferences and highlight the active navigation link.
*/

/* Balance multi‑line headings when supported and tighten letter spacing */
@supports (text-wrap: balance) {
  h1, h2, h3 {
    text-wrap: balance;
  }
}
h1, h2, h3 {
  letter-spacing: 0.01em;
}

/* Highlight the current section in the navigation */
.nav__link[aria-current="true"] {
  color: var(--kb-color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Clear, consistent outlines when elements receive focus via keyboard */
:where(a, button, [role="button"], .btn):focus-visible {
  outline: 2px solid var(--kb-color-accent);
  outline-offset: 2px;
}

/* Honour prefers-reduced-motion: minimise animation and transition durations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.footer__inner {
  display: flex;                 /* mobile first: stacked center */
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer__logo {
  width: 40px;
  height: 40px;
}

.footer__tagline {
  font-size: 0.9rem;
  color: var(--color-steel);
}

.footer__contact p {
  margin: 0.25rem 0;
}

/* Social icons: visible & tappable */
.footer__social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__social a {
  color: var(--color-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.footer__social a:hover,
.footer__social a:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-dark);
  border-color: transparent;
  outline: none;
}
.footer__social svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer__copy {
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--color-steel);
  text-align: center;
}

/* ===== Responsive Adjustments ===== */
@media (min-width: 768px) {
  /* Keep testimonials stacked; JS toggles .active to show only one */
  .testimonials__carousel {
    flex-direction: column;
  }

.contact__grid {
  flex-direction: row;
  align-items: stretch;   /* make columns equal height */
}

/* Make the right column fill the grid height */
.contact__details {
  align-self: stretch;            /* match the form column height */
  display: flex;
  flex-direction: column;
}

/* Let the map occupy the remaining height of the right column */
.contact__map {
  flex: 1;
  display: flex;                  /* create a height context for the img */
}

/* On desktop, make the map image fill and crop to the column height */
.contact__map img {
  height: 100%;
  object-fit: cover;              /* crop without distortion */
}


  /* Desktop footer: lock items into columns */
  .footer__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
  }
  .footer__brand { justify-self: start; }
  .footer__contact { justify-self: center; }
  .footer__social { justify-self: end; }
}